$(function() {
    //动态生成title列表
    createItem();
    //给title里面的a标签添加代理点击事件  因为是动态生成的
    $(".list").on("click", ".list-item>a", function() {
        //设置当前title下面的列表显示  其他title下面的列表隐藏
        $(this).siblings().toggle().parent().siblings().children("ul").css("display", "none");
        //设置右边的小箭头的旋转
        $(this).children("span").toggleClass("toggle");
        $(this).parent().siblings().find("span").removeClass("toggle");

        // 和上面的方法效果一样  选一种就行  上面是通过切换类名的方式
        // $(this).children("span").css({
        //     transform: "rotate(90deg)",
        //     // transition: "all linear"
        // }).parent().parent().siblings().find("span").css({
        //     transform: "rotate(0deg)"
        // });

        //获取给 title 里面的 a 的 自定义属性  data-id 的值，
        //生成下面的菜单的时候需要往后台传输id值
        var dataId = $(this).attr("data-id");
        // console.log(dataId);
        //生成菜单列表
        createMenu(dataId);
    });
});

//动态创建标题
function createItem() {
    $.ajax({
        type: "get",
        url: "http://182.254.146.100:3000/api/getcategorytitle",
        data: null,
        success: function(data) {
            // console.log(data);
            var titleList = template("titleList", data);
            $(".list").html(titleList);
        }
    });
};

//动态生成菜单列表
function createMenu(titleId) {
    $.ajax({
        type: "get",
        url: "http://182.254.146.100:3000/api/getcategory",
        data: {
            titleid: titleId
        },
        success: function(data) {
            console.log(data);
            var menuList = template("menuList", data);
            //因为点击a标签的时候  ul.menu 标签已经生成了 所以可以获取到
            $(".menu").eq(titleId).html(menuList);
        },
        complete: function() {
            //去除每个ul最后一排的里的下边框
            var listLength = $(".menu").eq(titleId).children().length;
            // console.log(listLength);
            var num = listLength % 3;
            num = num || 3;
            // console.log("num为" + num);
            $(".menu li:nth-last-child(-n+" + num + ")").css("border-bottom", "none");
        }
    });
};